<template>
    <el-row>
        <el-col :span="14" :offset="5">
            <el-form ref="form" :model="productAttr" label-width="150px">
                <el-form-item label="属性名称">
                    <el-input v-model="productAttr.name"></el-input>
                </el-form-item>
                <el-form-item label="商品类型">
                    <el-select v-model="productAttr.product_attribute_category_id" placeholder="请选择商品类型">
                        <el-option v-for="item in attrCateOptions"
                                   :key="item.id"
                                   :label="item.name"
                                   :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="能否进行检索">
                    <el-radio-group v-model="productAttr.search_type">
                        <el-radio v-for="item in searchTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="分类筛选样式">
                    <el-radio-group v-model="productAttr.filter_type">
                        <el-radio v-for="item in filterTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="商品属性关联">
                    <el-switch
                            v-model="productAttr.related_status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
                <el-form-item label="属性是否可选">
                    <el-radio-group v-model="productAttr.select_type">
                        <el-radio v-for="item in selectTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值的录入方式">
                    <el-radio-group v-model="productAttr.input_type">
                        <el-radio v-for="item in inputTypeOptions"
                                  :label="item.key" border>
                            {{item.display_name}}
                        </el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="属性值可选值列表">
                    <el-input type="textarea" v-model="inputListFormat"></el-input>
                </el-form-item>
                <el-form-item label="是否支持手动新增">
                    <el-switch
                            v-model="productAttr.hand_add_status"
                            active-color="#13ce66"
                            inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>

                <el-form-item label="排序值">
                    <el-input v-model="productAttr.sorted"></el-input>
                </el-form-item>

                <el-form-item label="属性类型">
                    <el-select v-model="productAttr.type" placeholder="请选择属性类型">
                        <el-option v-for="item in productAttrTypeOptions" :label="item.display_name" :value="item.key">
                        </el-option>
                    </el-select>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-col>
    </el-row>
</template>

<script>
  import {
    filterTypeOptions,
    inputTypeOptions,
    productAttrTypeOptions,
    searchTypeOptions,
    selectTypeOptions
  } from './common'

  import { listAttrCateOptions, saveProductAttr } from '@/api/goods/attr'

  export default {
    name: 'GoodsAttrDetail',
    props: {
      isEdit: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {
        selectTypeOptions: selectTypeOptions,
        inputTypeOptions: inputTypeOptions,
        filterTypeOptions: filterTypeOptions,
        searchTypeOptions: searchTypeOptions,
        productAttrTypeOptions: productAttrTypeOptions,
        attrCateOptions: [],
        inputListFormat: undefined,
        attr: {
          name: '',
          cate: '',
          date1: '',
          date2: '',
          delivery: true,
          type: [],
          resource: '',
          desc: '',
          sorted: 999
        },
        productAttr: {
          product_attribute_category_id: undefined,
          name: undefined,
          select_type: undefined,
          input_type: undefined,
          input_list: undefined,
          sorted: 999,
          filter_type: undefined,
          search_type: undefined,
          related_status: true,
          hand_add_status: false,
          type: undefined
        }
      }
    },
    created () {
      this.initAttrOptions()
    },
    watch: {
      inputListFormat: function (newValue, oldValue) {
        newValue = newValue.trim().replace(/\n/g, ',')
        this.productAttr.input_list = newValue
      }
    },
    methods: {
      initAttrOptions () {
        listAttrCateOptions().then(res => {
          this.attrCateOptions = res
        })
      },
      onSubmit () {
        saveProductAttr(this.productAttr).then(res => {
          this.$message({
            dangerouslyUseHTMLString: true,
            message: '添加成功',
            type: 'success'
          })
        })
      },
      resetForm (formName) {
      }
    },
  }
</script>

<style>

</style>
